<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-16 15:08:03
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-10-21 10:29:24
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 技术服务机构=>服务能力
-->

<template>
  <!-- 单位基本信息 -->
  <view class="collapsePane">
    <!-- 字段标题 -->
    <view class="title" @click="status = !status">
      服务能力
      <view :class="status ? 'cuIcon-unfold' : 'cuIcon-right'" />
    </view>

    <!-- 折叠中的内容 -->
    <view class="pane" :class="status ? 'unfold' : 'fold'">

      <!-- 表单字段内容 -->
      <view class="card_form scrollPane">
        <view class="formItem_doubleRow" v-for="(formItem, index) in formBuild" :key="index">
          <view class="label">{{ formItem.label }}</view>
          <template>
            <view class="uni-list" v-if="formItem.type == 'select'">
              <checkbox-group @change="checkboxChange">
                <label class="flex justify-start align-center" style="margin-top: 10rpx" v-for="item in items"
                  :key="item.value">
                  <view>
                    <checkbox :value="item.dictValue" color="#FFCC33" disabled style="transform:scale(0.7)"
                      :checked="item.checked" />
                  </view>
                  <view style="margin-left: 10rpx">{{ item.dictLabel }}</view>
                </label>
              </checkbox-group>
            </view>

            <encapsulation-preview v-if="formItem.type === 'image' && formItem.prop"
              :fileUrl="formItem.prop"></encapsulation-preview>
            <view v-if="formItem.type != 'select' && !formItem.prop" class="noTem">暂无数据</view>
          </template>
        </view>
      </view>
    </view>
  </view>

</template>
<script>
import EncapsulationPreview from '../components/EncapsulationPreview.vue';
export default {
  components: { EncapsulationPreview },
  name: 'staffInfo',
  data() {
    return {
      status: false, // true为开启
      items: [],
      formBuild: [
        {
          label: "检测能力", prop: null, type: 'select'
        },
        {
          label: '建筑消防设施检测附件', prop: null, type: 'image', show: false
        },
        {
          label: '建筑电气消防安全附件', prop: null, type: 'image', show: false
        },
        {
          label: '钢结构防火涂料检测项目附件', prop: null, type: 'image', show: false
        },
        {
          label: '其他检测能力附件', prop: null, type: 'image', show: false
        }
      ]
    }
  },
  props: {
    form: {
      type: Object,
      default: () => { }
    }
  },
  created() {
    this.getDictionary()
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.form)
      }, 1000);
    }).then(res => {
      this.$nextTick(() => {
        this.formBuild[0].prop = res?.checkAbility?.detectionCapability || null
        let prop = this.formBuild[0].prop
        if (prop && prop.indexOf('1') != '-1') {
          this.formBuild[1].show = true
          this.formBuild[1].prop = res?.checkAbility?.testFiles || null
          this.$set(this.items[0], 'checked', true)
        }
        if (prop && prop.indexOf('2') != '-1') {
          this.formBuild[2].show = true
          this.formBuild[2].prop = res?.checkAbility?.safetyFiles || null
          this.$set(this.items[1], 'checked', true)
        }
        if (prop && prop.indexOf('3') != '-1') {
          this.formBuild[3].show = true
          this.formBuild[3].prop = res?.checkAbility?.projectFiles || null
          this.$set(this.items[2], 'checked', true)
        }
        if (prop && prop.indexOf('4') != '-1') {
          this.formBuild[4].show = true
          this.formBuild[4].prop = res?.checkAbility?.otherFiles || null
          this.$set(this.items[3], 'checked', true)
        }
      })
    })
  },
  methods: {
    getDictionary() {
      this.$getDict('detection_capability').then(res => {
        this.items = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.collapsePane {
  .peopleBar {
    display: flex;
    align-items: center;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #ddd;

    &:active {
      background-color: white;
    }

    .peopleInfo {
      flex: 1;

      view:first-child {
        font-size: 30rpx;
        font-weight: bold;
      }

      view:last-child {
        font-size: 24rpx;
        color: #999;
      }
    }

    view[class*="cuIcon-"] {
      width: inherit;
    }
  }
}

.uni-list-cell {
  justify-content: flex-start;
}

.noTem {
  color: #7e7e7e;
}
</style>